<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>主数据</el-breadcrumb-item>
        <el-breadcrumb-item>物料产品分类</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <!-- 搜索栏-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="classifyQuery" inline>
        <el-form-item label="分类名称">
          <el-input v-model="classifyQuery.classifyName" clearable/>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select style="width: 120px" v-model="classifyQuery.classifyStatus" clearable>
            <el-option :value="0" label="全部"/>
            <el-option :value="1" label="是"/>
            <el-option :value="2" label="否"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="loadClassifys" type="primary"> <el-icon><Search /></el-icon>&nbsp搜索</el-button>
          <el-button @click="referClassifys"> <el-icon><Refresh /></el-icon>&nbsp重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="classifys" border stripe
                row-key="classifyId"
                lazy
                :load="loadChildrenClassify"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                @expand-change="expandChange"
                :expand-row-keys="expandRowKeys"
                ref="classifyTable">
        <el-table-column prop="classifyName" label="分类"/>
        <el-table-column prop="classifyOrder" label="排序"/>
        <el-table-column prop="classifyType" label="物料/产品">
          <template #default="scope">
            <el-row v-if="scope.row.classifyType == 1">物料</el-row>
            <el-row v-else-if="scope.row.classifyType == 2">产品</el-row>
          </template>
        </el-table-column>
        <el-table-column prop="classifyStatus" label="是否启用">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.classifyStatus == 1">是</el-tag>
            <el-tag type="info" v-else-if="scope.row.classifyStatus == 2">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-link @click="toEditClassify(scope.row)" style="margin: 0px 5px" type="primary"><el-icon><EditPen /></el-icon>编辑</el-link>

            <el-link @click="toAddSubClassify(scope.row)" style="margin: 0px 5px" type="primary"><el-icon><Plus /></el-icon>新增</el-link>
            <el-popconfirm width="200"
                           confirm-button-text="必须删"
                           cancel-button-text="点错了"
                           @confirm="deleteClassifyById(scope.row.classifyId)"
                           title="您确定要删除这条数据吗？">
              <template v-if="scope.row.classifyParentId !== 0" #reference>
                <el-link style="margin: 0px 5px" type="primary">
                  <el-icon><Delete /></el-icon>删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <!-- 新增弹窗组件 -->
  <classifyAdd @cancelClassifyAdd="cancelClassifyAdd"
           @add-complete="addClassifyComplete"
           :is-show="addWinIsShow"
           :parent-classify="parentClassify"
           style="margin-top: 100px"/>

  <!-- 编辑分类的弹窗组件 -->
  <classifyEdit :classify-id="editClassifyId"
                :superior-classify ="superiorClassify"
             @cancel-classify-edit="cancelClassifyEdit"
             @edit-complete="editComplete"
             style="margin-top: 30px"/>
</template>

<script setup>
import {onBeforeMount, ref} from "vue";
import {ElMessage} from "element-plus";
import classifyRequest from "@/api/classify.js";
import classifyAdd from "@/views/md/classify/classify-add.vue";
import classifyEdit from "@/views/md/classify/classify-edit.vue"
// 封装搜索条件
let classifyQuery = ref({classifyStatus: 0});
// 封装查询的列表数据
let classifys = ref([]);
// 当前登录用户的编号
let curUserId = ref();
let expandRowKeys = ref([]);

//新增窗口
let addWinIsShow = ref(false);
//父分类
let parentClassify = ref(null);

// 当前要编辑的分类的编号，默认是-1
let editClassifyId = ref(-1);
// 上级分类
let superiorClassify = ref(null);

let classifyTable = ref(null);

// 监听行展开或收起
function expandChange(row,expanded){
  console.log(expandRowKeys)
}

/**
 * 行级新增分类事件
 * @param classify
 */
function toAddSubClassify(classify){
  parentClassify.value = classify;
  addWinIsShow.value = true;
}

/**
 * 新增分类完成的监听事件
 */
function addClassifyComplete(){
  cancelClassifyAdd();
  loadClassifys(0);
}

/**
 * 取消新增的事件
 */
function cancelClassifyAdd(){
  addWinIsShow.value = false;
  parentClassify = ref(null);
  loadClassifys(0);
}

/**
 * 行删除按钮事件
 * @param classifyId
 */
function deleteClassifyById(classifyId) {
  classifyRequest.countSubclassify(classifyId,res=>{
    console.log(res.data);
    if (res.data != 0) {
      ElMessage.warning('该分类有子分类不能删除');
    } else {
      classifyRequest.deleteClassifyById(classifyId,res => {
        if (res.code === 200) {
          ElMessage.success('删除完成');
          loadClassifys(0);
        }
      });
    }
  })
}

/**
 * 行级编辑按钮事件
 * @param classify
 */
function toEditClassify(classify){
  if (classify.classifyParentId != 0) {
    classifyRequest.selectById(classify.classifyParentId,res=>{
      superiorClassify.value = res.data;
    });
  }
  editClassifyId.value = classify.classifyId;
}

/**
 * 编辑完成的事件
 */
function editComplete(){
  // 更新数据表
  cancelClassifyEdit();
}

/**
 * 编辑取消的事件
 */
function cancelClassifyEdit(){
  // 将editClassifyId修改为-1
  editClassifyId.value = -1;
  superiorClassify = ref(null);
}

/**
 * 加载子任务列表
 * @param classify 当前这一行数据对象
 * @param node  树节点
 * @resole 函数，用来将我们的数据加入到列表中
 */
function loadChildrenClassify(classify,node,resole){
  // 加载数据
  classifyRequest.loadClassify(classifyQuery.value,classify.classifyId,res=>{
    // 调用resole函数将查询的结果加入列表
    resole(res.data);
  })
}

/**
 * 加载任务列表
 * @param parentId 父任务编号
 */
function loadClassifys(parentId){
  if ( classifyQuery.value.classifyStatus == 0 && classifyQuery.value.classifyName == null || classifyQuery.value.classifyName == ''){
    referClassifys();
  } else {
    // 通过API加载任务列表
    classifyRequest.loadClassify(classifyQuery.value, parentId,res=>{
      classifys.value = res.data;
    })
  }
}

/**
 * 重置按钮事件
 */
function referClassifys(){
  classifyQuery.value.classifyName = null;
  classifyQuery.value.classifyStatus = 0;
  classifyRequest.loadClassify(classifyQuery.value, 0,res=>{
    classifys.value = res.data;
  })
}

onBeforeMount(()=>{
  loadClassifys();
  // 获取用户编号
  curUserId = localStorage.getItem("userId");
  console.log(curUserId);
})
</script>

<style scoped>

</style>